<template>
  <!-- 精彩评论 -->
  <el-row :gutter="20" class="comment" id="comment">
    <el-col :span="16">
      <div class="comment-top">精彩评论</div>
      <ul class="comment-ul">
        <li v-for="item in data.arr" :key="item.commentid">
          <div class="img">
            <img :src="item.user.avatarUrl" alt="" />
          </div>
          <div class="name">
            <h4>{{ item.user.nickname }}</h4>
          </div>
          <div class="date">{{ Time(item.time) }}</div>
          <p class="text">
            <span>{{ item.content }}</span>
          </p>
          <div class="opt">
            <a class="zan"
              ><i class="iconfont icon-dianzan1"></i>{{ item.likedCount }}</a
            >
            <a class="feedback c_tx_thin">回复</a>
          </div>
          <div class="comment__reply">
            <div class="comment__reply_hd">
              <a
                class="comment__show_all_reply c_tx_thin"
                v-if="length(item.middlecommentcontent)"
                >查看{{ length(item.middlecommentcontent) }}条回复<i
                  class="comment__icon_arrow_down sprite"
                ></i
              ></a>
            </div>
          </div>
        </li>
      </ul>
    </el-col>
  </el-row>
</template>

<script>
import { getComment } from "@/api";
import { onMounted, reactive, computed } from "vue";

export default {
  name: "comment",
  props: {
    id: {
      type: Number,
    },
  },
  setup(props) {
    let data = reactive({ arr: [] });
    var Time = null;
    onMounted(async () => {
      let id = props.id;
      let res = await getComment(id);
      data.arr = res.data.comments;
    });
    Time = computed(() => (time) => {
      //将时间戳转换成时间格式
      let cTime = time;
      var date = new Date(cTime);
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      var h = date.getHours();
      h = h < 10 ? "0" + h : h;
      var minute = date.getMinutes();
      var second = date.getSeconds();
      minute = minute < 10 ? "0" + minute : minute;
      second = second < 10 ? "0" + second : second;
      return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
    });
    const length = computed(() => (value) => {
      if (value != null) {
        return value.length;
      } else {
        return 0;
      }
    });
    return { data, Time, length };
  },
};
</script>

<style lang="less" scoped>
.comment {
  text-align: left;
  .comment-top {
    font-weight: 500;
    padding: 15px;
    border-bottom: 1px solid #dcdfe6;
    font-size: 22px;
  }
  .comment-ul {
    margin-top: 0;
    li {
      position: relative;
      padding-left: 80px;
      font-size: 14px;
      line-height: 24px;
      list-style: none;
      padding-top: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #dcdfe6;
      .img {
        position: absolute;
        left: 0;
        img {
          width: 50px;
          height: 50px;
          border-radius: 50%;
        }
      }
      .name h4,
      .date {
        color: #999;
        margin: 0;
      }
      .opt a {
        margin-right: 20px;
      }
    }
  }
}
</style>
